<template>
  <div :class="leftnav.navclass">
    <div class="svgimg" v-show="leftnav.navopen">
      <n-collapse default-expanded-names="1" accordion>
        <n-collapse-item title="📝 文本组件" name="1">
          <ul class="leftImgUl">
            <li v-for="leftImgItem,index in props.left_imglists['textComponentList']" :key="index">
              <img
                  :title="leftImgItem.title"
                  :src="leftImgItem.priview_img"
                  draggable="true"
                  @dragstart="dragStartEvent(leftImgItem, $event)"
                  @dragend="dragEndEvent(leftImgItem, $event)"
              />
            </li>
          </ul>
        </n-collapse-item>
        <n-collapse-item title="📦 常规组件" name="2">
          <ul class="leftImgUl">
            <li v-for="leftImgItem,index in props.left_imglists['commonComponentList']" :key="index">
              <img
                :title="leftImgItem.title"
                :src="leftImgItem.priview_img"
                draggable="true"
                @dragstart="dragStartEvent(leftImgItem, $event)"
                @dragend="dragEndEvent(leftImgItem, $event)"
              />
            </li>
          </ul>
        </n-collapse-item>
        <n-collapse-item title="⚡ 电力组件" name="3">
          <ul class="leftImgUl">
            <li v-for="leftImgItem,index in props.left_imglists['powerComponentList']" :key="index">
              <img
                  :title="leftImgItem.title"
                  :src="leftImgItem.priview_img"
                  draggable="true"
                  @dragstart="dragStartEvent(leftImgItem, $event)"
                  @dragend="dragEndEvent(leftImgItem, $event)"
              />
            </li>
          </ul>
        </n-collapse-item>
        <n-collapse-item title="✏️ 绘制组件" name="4">
          <ul class="leftImgUl">
            <li v-for="leftImgItem,index in props.left_imglists['drawComponentList']" :key="index">
              <img
                :class="props.select_toolbar == leftImgItem.type ? 'svg-selected' : ''"
                :title="leftImgItem.title"
                :src="leftImgItem.priview_img"
                @click="() => { emit('setCreatSvgInfo', leftImgItem) }"
              />
            </li>
          </ul>
        </n-collapse-item>
        <n-collapse-item title="📊 图表组件" name="5">
          <ul class="leftImgUl">
            <li v-for="leftImgItem,index in props.left_imglists['chartComponentList']" :key="index">
              <img
                :title="leftImgItem.title"
                :src="leftImgItem.priview_img"
                draggable="true"
                @dragstart="dragStartEvent(leftImgItem, $event)"
                @dragend="dragEndEvent(leftImgItem, $event)"
              />
            </li>
          </ul>
        </n-collapse-item>
        <n-collapse-item title="💧 水务组件" name="6">
          <ul class="leftImgUl">
            <li v-for="leftImgItem,index in props.left_imglists['waterComponentList']" :key="index">
              <img
                :title="leftImgItem.title"
                :src="leftImgItem.priview_img"
                draggable="true"
                @dragstart="dragStartEvent(leftImgItem, $event)"
                @dragend="dragEndEvent(leftImgItem, $event)"
              />
            </li>
          </ul>
        </n-collapse-item>
        <n-collapse-item title="⛏️ 煤炭组件" name="7">
          <ul class="leftImgUl">
            <li v-for="leftImgItem,index in props.left_imglists['coalComponentList']" :key="index">
              <img
                :title="leftImgItem.title"
                :src="leftImgItem.priview_img"
                draggable="true"
                @dragstart="dragStartEvent(leftImgItem, $event)"
                @dragend="dragEndEvent(leftImgItem, $event)"
              />
            </li>
          </ul>
        </n-collapse-item>
      </n-collapse>
      
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { NCollapse, NCollapseItem, useMessage } from "naive-ui";
import { ILeftImgLists, IComponentInfo } from "../Model";
const emit = defineEmits(['setCreatSvgInfo'])
const message = useMessage();
const props = defineProps({
  left_imglists: {
    type: Object as () => ILeftImgLists,
    // default: []
  },
  //选中的左侧工具图标
  select_toolbar: {
    type: String,
    default: ''
  }
});

const leftnav = reactive({
  navclass: 'leftnavDisplay',
  navopen: true
});

const dragStartEvent = (leftImgItem: IComponentInfo, e: DragEvent) => {
  //设置要创建的svg组件信息
  // console.log('leftImgItem',leftImgItem)
  emit('setCreatSvgInfo', leftImgItem);
}
const dragEndEvent = (leftImgItem: IComponentInfo, e: DragEvent) => {
  //拖动时记录拖动的svg信息
  if (e.dataTransfer?.dropEffect !== 'copy') {
    message.error('请将组件拖到画布中!');
    //清空已选择的信息
    emit('setCreatSvgInfo', {});
    return;
  }
}
</script>

<style lang="scss" scoped>
.leftnavDisplay {
  height: 100%;
  display: flex;
  width: 210px;
}

.svgimg {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  padding: 8px;
  
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    
    &:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }
}

.leftImgUl {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 8px;
  gap: 8px;
}

.leftImgUl li {
  width: calc(33.33% - 8px);
  aspect-ratio: 1;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  transition: all 0.3s ease;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.leftImgUl img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.leftImgUl li:hover img {
  transform: scale(1.05);
}

.svg-selected {
  outline: 2px solid #409eff;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.n-collapse-item__header) {
  padding: 12px 16px;
  background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
}

:deep(.n-collapse-item__content) {
  background: #fafafa;
}
</style>